<script setup>
import { User, Lock, View, Hide } from '@element-plus/icons-vue'
import { ref } from 'vue'
import adminApi from '@/api/admin.js'
import captchaApi from "@/api/captcha.js";

import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/store/token.js'

const router = useRouter()
const tokenStore = useTokenStore()

// 定义数据模型
const admin = ref({
  name: '',
  password: '',
  captcha: '',
  uuid: ''
})

// 表单校验模型
const rules = ref({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 16, message: '密码长度必须为3~16位', trigger: 'blur' }
  ]
})

// Caps Lock 提示状态
const capsLock = ref(false)
const handlePasswordKeyup = (e) => {
  const isShift = e.getModifierState && e.getModifierState("Shift")
  const isCaps = e.getModifierState && e.getModifierState("CapsLock")
  capsLock.value = isCaps && !isShift
}

// 控制密码可见切换
const showPassword = ref(false)
const togglePassword = () => {
  showPassword.value = !showPassword.value
}

// 登录按钮动画状态
const isPressed = ref(false)

// 登录逻辑
const login = () => {
  isPressed.value = true   // 按钮动效
  adminApi.adminlogin(admin.value).then(result => {
    if (result.code == 0) {
      ElMessage.success(result.msg ? result.msg : '登录成功')
      tokenStore.setToken(result.data)
      router.push('/')
    } else {
      loadCaptcha()

    }
  })
}


const captcha = ref('')
const loadCaptcha = () => {
  captchaApi.captcha().then(result => {
    captcha.value = result.data.captcha
    admin.value.uuid = result.data.uuid
  })
}

loadCaptcha()



const goUserLogin = () => {
  router.push('/user-login') // 假设路由路径是 /user-login
}

</script>

<template>
  <div class="login-bg">
    <!-- 登录表单 -->
    <el-form
        class="form-login"
        ref="form"
        size="large"
        autocomplete="off"
        :model="admin"
        :rules="rules"
        @submit.native.prevent="login"
    >
      <el-form-item>
        <h1>管理员登录</h1>
      </el-form-item>

      <!-- 用户名 -->
      <el-form-item prop="name">
        <el-input
            :prefix-icon="User"
            placeholder="请输入用户名"
            v-model="admin.name"
        />
      </el-form-item>

      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
            name="password"
            :prefix-icon="Lock"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码"
            v-model="admin.password"
            @keyup="handlePasswordKeyup"
        >
          <!-- 密码可见切换按钮 -->
          <template #suffix>
            <el-icon class="eye-icon" @click="togglePassword">
              <component :is="showPassword ? View : Hide" />
            </el-icon>
          </template>
        </el-input>

        <!-- Caps Lock 提示 -->
        <div v-if="capsLock" class="caps-warning">注意：大写锁定已开启</div>
      </el-form-item>


      <el-form-item prop="captcha">
        <el-input name="captcha" v-model="admin.captcha" placeholder="验证码" auto-complete="off" prefix-icon="el-icon-refresh"></el-input>
        <img width="160px" :src="captcha" @click="loadCaptcha" alt="验证码"/>
      </el-form-item>

      <!-- 记住我 & 忘记密码 -->
      <el-form-item class="flex">
        <div class="flex">

          <el-link
              type="primary"
              :underline="false"
              @click="goUserLogin"
          >
            用户登录
          </el-link>

        </div>
      </el-form-item>

      <!-- 登录按钮 -->
      <el-form-item>
        <el-button
            class="button"
            type="primary"
            auto-insert-space
            native-type="submit"
            @animationend="isPressed = false"
            :class="{ pressed: isPressed }"
        >
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.login-bg {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 背景 GIF */
  background: url('@/assets/login.gif') no-repeat center center / cover;
  position: relative;
}

/* 浅色半透明遮罩 */
.login-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}

/* 表单卡片 */
.form-login {
  width: 380px;
  padding: 40px 30px;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #333;
  animation: fadeInUp 0.8s ease;
}

/* 标题 */
.form-login h1 {
  font-size: 28px;
  margin-bottom: 25px;
  font-weight: bold;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 输入框 */
.el-input {
  --el-input-bg-color: rgba(255, 255, 255, 0.9);
  --el-input-border-color: #ddd;
  --el-input-hover-border-color: #4facfe;
  --el-input-focus-border-color: #00f2fe;
  --el-input-text-color: #333;
  --el-input-placeholder-color: #aaa;
  border-radius: 10px;
}

/* 密码小眼睛 */
.eye-icon {
  cursor: pointer;
  font-size: 18px;
  color: #666;
  transition: color 0.2s;
}
.eye-icon:hover {
  color: #4facfe;
}

/* Caps Lock 提示 */
.caps-warning {
  margin-top: 5px;
  font-size: 13px;
  color: #e74c3c;
  text-align: left;
  animation: blink 1s infinite;
}
@keyframes blink {
  50% { opacity: 0.5; }
}

/* 登录按钮 */
.button {
  width: 100%;
  height: 45px;
  border-radius: 10px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  transition: all 0.3s;
}
.button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.6);
}
.button.pressed {
  animation: pressEffect 0.2s ease;
}
@keyframes pressEffect {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
